<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../baselayout/import.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${staticPath}/assets/css/highcharts.css">
<title>详情</title>
</head>
<body>
<div id="container" style="min-width: 1000px;height:1000px; max-width: 1000px; margin: 0 auto"></div>
</body>
<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
<script src="${staticPath}/js/bootstrap.min.js"></script>
<script src="${staticPath}/assets/js/figure/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="${staticPath}/js/my.js"></script>
<script>
<%!
String formater = "{x:%f,y:%f,id:%d}";
%>
$(function () {
	<c:forEach items="${groupedID}" var="group" varStatus="st"> 
		window.ids<c:out value="${group.key}" /> = [<c:forEach items="${group.value}" var="vec">'${vec}',</c:forEach>];
	</c:forEach> 
	<c:forEach items="${groupedData}" var="group" varStatus="st"> 
		window.group<c:out value="${group.key}" /> = [<c:forEach items="${group.value}" var="vec" varStatus="index"> {x:${vec[0]},y:${vec[1] },id:${index.index}} ,</c:forEach>];
	</c:forEach> 
	
	var colors = ["#DC143C","#4B0082","#000080","#1E90FF","#00BFFF","#5F9EA0","#3CB371","#556B2F","#EEE8AA","#FFA500","#800000","#FF0000","#A52A2A","#FF4500","#A0522D"	];
	var series = [];
	for(let i=0;i<15;i++){
		let g = i+1;
		let name = "group"+g;
		let idName = "ids"+g;
		series.push({
			 name: name,
             type: 'scatter',
             color: colors[i],
             turboThreshold:0,
             data:	window[name],
             events:{
   	        	  	click:function(event){
           	  			messageBox('文档ID详情',window[idName][event.point.id],function(){console.log(event)});
             		},
             }
			});
	}
    $('#container').highcharts({
        title: {
            text: '文档向量'
        },
        subtitle: {
            text: '高维数据转换成二维数据'
        },
        xAxis: {
            gridLineWidth: 1,
            title: {
                enabled: true,
                text: 'X'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Y'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        series: series,
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: 'ID:{point.id},X:{point.x},Y:{point.y}'
        }
    }); 
});
</script>
</html>